<template>
	<div class="allocMenu">
		<div class="menulist_box">
			<el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="data" :default-checked-keys="checkMenu" :props="defaultProps" />
			<div class="menu_button_box">
				<el-button type="primary">保存</el-button>
				<el-button>清空</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import * as menu from "@/request/modules/menu";
import * as role from "@/request/modules/role";
import { ref } from "vue";
import type { Ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
let roleId = ref(0);
roleId.value = route.query.id as unknown as number;
// 所有菜单数据
const data = ref([]) as Ref<any>;
// 选中的菜单数据
const checkMenu = ref([]) as Ref<number[]>;
const defaultProps = {
	children: "children",
	label: "title",
};
const treeList = async () => {
	let res = await menu.treeListAPI();
	let checkRole = await role.getListMenuAPI(roleId.value);
	checkMenu.value = checkRole.map((item) => item.id);
	// console.log(res);
	data.value = res;
};
treeList();
</script>

<style lang="less" scoped>
.allocMenu {
	padding: 20px 20px 10px;
	.menulist_box {
		padding: 20px;
		border-radius: 4px;
		box-shadow: 0 0 5px 3px #eee;
		.menu_button_box {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
